;(function(){
    class Datile{
        constructor(){}
        init(page){
            this.url = "bilibili.json";
            this.id = "";
            this.data = [];
            this.page = page;
            
            this.getPage();
            this.requireData();
        }

        //绑定事件
        bindEvent(){
            let _this = this;
            setTimeout(() => {
                $(".project-list li").on("click", function(){
                    let id = $(this).attr("data-id");
                    _this.getData(id);
                    
                })
            }, 500);
        }

        //数据请求并进行id的比对
        requireData(){
            xhrGet(this.url)
            .then(res=>{
                res = JSON.parse(res);
                this.data = res.data;
                this.bindEvent();
            })
        }

        getData(id){
            let dataArr = this.data[this.page-1].result;
            dataArr.forEach(item => {
                if(item.id == id){
                    localStorage.setItem("detailData", JSON.stringify(item));
                    return true;
                }
            });
            window.open("detail.html", "_blank");
        }

        //获取当前页
        getPage(){
            $(".pagination .pageNum").on("click", function(){
                this.page = Number($(this).html());
            }) 
        }
    }

    //渲染页面(懒加载) + 分页
    class Pagination{
        constructor(){}
        //初始化
        /**
         * @param url 数据请求路径
         * @param projectList  拼接页面的父元素   ul
         * @param pageCount 总页数
         * @param page 当前页
         * @param pageBtnList 分页按钮列表
         * @param pageBtnContainer 分页按钮容器
         */
        init(projectList, pageBtnContainer, next, prev){
            this.projectList = projectList;
            this.url = "bilibili.json";
            this.page = 1;
            this.pageCount = 10;
            this.pageBtnList = [];
            this.pageBtnContainer = pageBtnContainer;
            this.next = next;
            this.prev = prev;
            
            this.requireData();
            this.renderBtn();
            this.bindEvent();
        }

        //绑定事件
        bindEvent(){
            this.pageBtnList.forEach( (ele,index)=>{
                ele.addEventListener("click", this.toPage.bind(this,index+1))
            })
            this.prev.addEventListener("click", this.toPrev.bind(this));
            this.next.addEventListener("click", this.toNext.bind(this));
        }

        //请求数据
        requireData(){
            xhrGet(this.url).then(res=>{
                res = JSON.parse(res);
                let _index = this.page-1;
                this.renderPage(res.data[_index].result);
            })
        }

        //渲染页面
        renderPage(data){
            let html = ``;
            data.forEach((item, index) => {
                html += `<li data-id="${data[index].id}" class="project-list-item">
                            <div class="project-list-item-img">
                                <img src="./images/loading.png"
                                data-src="${data[index].cover}">
                            </div>
                            <div class="project-list-item-detail">
                                <div class="project-list-item-title">${data[index].project_name}</div>
                                <div class="project-list-item-time">
                                    <span class="fa fa-calendar"></span>
                                    ${data[index].tlabel}
                                </div>
                                <div class="project-list-item-address">
                                    <span class="fa fa-map-marker"></span>
                                    <span class="city-name">${data[index].city}</span>
                                    <span class="venue-name-and-address">${data[index].venue_name}</span>
                                </div>
                                <div class="project-list-item-price">
                                    <div class="not-free">
                                        <span class="price-symbol">¥</span>
                                        <span class="price">${(data[index].price_low/100).toFixed(2)}</span>
                                    </div>
                                </div>
                            </div>
                        </li>
                    `
            });
            projectList.innerHTML = html;
            lazyload(".project-list-item-img img");
            let datile = new Datile();
            datile.init(this.page);
        }

        //渲染按钮
        renderBtn(){
            //创建一个空的dom节点
            let btnWrap = document.createDocumentFragment();
            for(var i = 1; i <= this.pageCount; i ++){
                let span = document.createElement("span");
                span.className = "pageNum";
                span.innerHTML = i;
                if(i === this.page){
                        span.className += " active";
                }
                btnWrap.appendChild(span);
                this.pageBtnList.push(span);
            }
            this.pageBtnContainer.appendChild(btnWrap);
        }

        //再次渲染按钮和页面(根据当前页给按钮添加不同样式)
        reRenderBtn(){
            this.changeStyleNext_prev();
            this.pageBtnList.forEach( (ele,index) => {
                if(index + 1 === this.page){
                        ele.className += " active";
                }else{
                        ele.className = "pageNum";
                }
            })
            this.requireData();
        }

        //更改next和prev
        changeStyleNext_prev(){
            if(this.page === 1){
                this.prev.className += " forbid";
            }else{
                this.prev.className += "fa fa-chevron-left";
            }
            if(this.page === this.pageCount){
                this.next.className += " forbid";
            }else{
                this.next.className += "fa fa-chevron-right";
            }
        }

        //到当前页
        toPage(index){
            this.page = index;
            this.reRenderBtn();
        }
        //到下一页
        toNext(){
            if(this.page === this.pageCount){
                return false;
            }else{
                this.page ++;
                this.reRenderBtn();
            }
        }
        //到当前页面
        toPrev(){
            if(this.page === 1){
                return false;
            }else{
                this.page --;
                this.reRenderBtn();
            }
        } 

    }

    //调用
    let pagination = new Pagination();
    let projectList = document.querySelector(".project-list");
    let pageBtnContainer = document.querySelector(".pagination");
    let next = document.querySelector("#next");
    let prev = document.querySelector("#prev");
    pagination.init(projectList, pageBtnContainer, next, prev);   
})();
